<template>
	<div class="mine-container">
		<div class="mine-header">
			<div class="useravatar">
				<el-avatar shape="circle" :size="60" fit="cover" :src="info.avatar"></el-avatar>
			</div>
			<div class="userinfo">
                <span class="nickname">{{ info.nickname }}</span>
                <span class="account"> (余额:￥{{ info.account }})</span>
			</div>
		</div>

		<div class="mine-list">
			<ul class="icon-list">
				<li>
					<router-link to="/profile">
						<div>
							<i class="el-icon-s-order"></i>
						</div>
						<div class="title">
							<span>基本资料</span>
						</div>
					</router-link>
				</li>
				<li>
					<router-link to="/withdraw">
						<div>
							<i class="el-icon-s-finance"></i>
						</div>
						<div class="title">
							<span>申请提现</span>
						</div>
					</router-link>
				</li>
				<li>
					<router-link to="/charge">
						<div>
							<i class="el-icon-money"></i>
						</div>
						<div class="title">
							<span>我要充值</span>
						</div>
					</router-link>
				</li>
				<li>
					<router-link to="">
						<div>
							<i class="el-icon-s-marketing"></i>
						</div>
						<div class="title">
							<span>财务明细</span>
						</div>
					</router-link>
				</li>

				<li>
					<router-link to="/task">
						<div>
							<i class="el-icon-s-management"></i>
						</div>
						<div class="title">
							<span>我的任务</span>
						</div>
					</router-link>
				</li>
				<li>
					<router-link to="/promo">
						<div>
							<i class="el-icon-s-promotion"></i>
						</div>
						<div class="title">
							<span>申请推广</span>
						</div>
					</router-link>
				</li>
				<li>
					<router-link to="">
						<div>
							<i class="el-icon-eleme"></i>
						</div>
						<div class="title">
							<span>我的邀请码</span>
						</div>
					</router-link>
				</li>
				<li>
					<router-link to="">
						<div>
							<i class="el-icon-question"></i>
						</div>
						<div class="title">
							<span>帮助中心</span>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Menu from "./Menu.vue";
	export default {
		data() {
			return {
				info: {
					nickname: "rainfer",
					avatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                    account: 150.8,
				}
			};
		}
	};
</script>

<style scoped>
    .mine-container {
        height: 100vh;
        background-color: #fff;
    }
	.mine-header {
		background-color: var(--color-red);
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.mine-header .useravatar {
		width: 60px;
		margin: 0 auto;
	}
	.mine-header .userinfo {
		line-height: 30px;
		color: #fff;
		font-weight: var(--font-lg-weight);
		text-align: center;
	}
    .mine-header .userinfo .nickname{
        font-size: 24px;
    }
    .mine-header .account {
        color: #EEE;
        font-size: 12px;
    }

	.icon-list {
		widows: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.icon-list li {
		display: inline-table;
		box-sizing: border-box;
		list-style: none;
		width: 25%;
		height: 55px;
		text-align: center;
		border-bottom: 1px solid var(--border-line);
	}
	.icon-list li a {
        display: block;
        padding: 10px 0;
        border-radius: 0;
		text-decoration: none;
		cursor: pointer;
	}
    .icon-list li .title{
        padding-top: 10px;
    }
	.icon-list li i,
	.icon-list li span {
		color: var(--color-mdjor);
	}
	.icon-list li i {
		font-size: 26px; /* 32px; */
	}
	.icon-list li span {
		font-size: 12px;
	}
	.icon-list li:not(:first-child) {
		border-left: 1px solid var(--border-line);
	}
</style>
